<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-if="type === 'node'">
        <label>节点名称：</label><input v-model="formModel.label" @blur.prevent="handleSubmit"/>
        <br/>
        <label>指定角色：</label>
        <select v-model="formModel.roles" @change.prevent="handleSubmit">
          <option value="无">无</option>
          <option value="发起人">发起人</option>
          <option value="项目经理">项目经理</option>
          <option value="部门经理">部门经理</option>
          <option value="部门总监">部门总监</option>
          <option value="副总经理">副总经理</option>
          <option value="总经理">总经理</option>
          <option value="EMT分管领导">EMT分管领导</option>
          <option value="董事长">董事长</option>
        </select>
        <br/>
        <label>指定人员：</label>
        <!-- <select v-model="formModel.users" @change.prevent="handleSubmit">
          <option value="无">无</option>
        </select> -->
        <el-select
          v-model="formModel.users"
          multiple
          filterable
          remote
          @change="handleSubmit"
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          :loading="loading">
          <el-option label="无" value=""></el-option>
          <el-option
            v-for="item in options"
            :key="item.userId"
            :label="item.userName+item.userId"
            :value="item.userId">
          </el-option>
        </el-select>
      </div>
      <!-- <div v-else-if="type === 'edge'"> -->
        <!-- <label>名称：</label><input v-model="formModel.label" @blur.prevent="handleSubmit"/> -->
        <!-- <label>类型：</label><select v-model="formModel.shape" @change.prevent="handleSubmit"> -->
          <!-- <option value="flow-smooth">箭头曲线</option> -->
          <!-- <option value="flow-polyline">箭头直角折线</option> -->
          <!-- <option value="custom-polyline">无箭头直角折线</option> -->
          <!-- <option value="flow-polyline-round">箭头圆角折线</option> -->
        <!-- </select> -->
      <!-- </div> -->
      <!-- <div v-else-if="type === 'group'">
        <input v-model="formModel.label" @blur.prevent="handleSubmit"/>
      </div> -->
    </form>
  </div>
</template>

<script>
import { omit } from 'lodash';

export default {
  name: 'DetailForm',

  created () {
    const formModel = this.root.propsAPI.getSelected()[0].getModel();
    this.formModel = Object.assign({}, { shape: 'flow-polyline' }, formModel);
  },

  mounted () {
    this.list = this.states.map(item => {
      return { value: `${item.userId}`, label: `${item.userName}${item.userId}` };
    });
  },

  methods: {
    handleSubmit (e) {
      const { getSelected, executeCommand, update } = this.root.propsAPI;
      const { formModel } = this;
      setTimeout(() => {
        const item = getSelected()[0];
        if (!item) return;
        executeCommand(() => {
          // this is for duplicate node in mind chart
          update(item, { ...omit(formModel, 'children') });
        });
      }, 0);
    },

    remoteMethod (query) {
      if (query !== '') {
        this.loading = true;
        let params = {
          userName: query
        };
        this.$http.post('api/findUserByName', params).then(res => {
          let { code, datas } = res;
          // 判断Code状态
          if (code === 0) {
            // 初始化列表
            // this.states = datas;
            setTimeout(() => {
              this.loading = false;
              this.options = datas;
            }, 200);
          }
        }).catch(err => {
          if (err === undefined) {
            this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
        // setTimeout(() => {
        //   this.loading = false;
        //   this.options = this.list.filter(item => {
        //     return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1;
        //   });
        // }, 200);
      } else {
        this.options = [];
      }
    }
  },

  inject: ['root'],

  props: ['type'],

  data () {
    return {
      formModel: {},
      options: [],
      value: [],
      list: [],
      loading: false,
      states: []
    };
  }
};
</script>
